<template>
	<!-- 礼物系统消息 -->
	<view v-if="cdata.subType===11" class="chat-system">
		<image class="icon" :src="cdata.message.gift.icon" mode="aspectFill"></image>
		<block v-if="cdata.direction === 0">
			你领取了{{cdata.message.receiveUserName}}的<text>{{cdata.message.gift.name}}￥{{cdata.message.gift.price}}</text>
		</block>
		<block v-else>
			{{cdata.message.sendUserName}}领取了你的<text>{{cdata.message.gift.name}}￥{{cdata.message.gift.price}}</text>
		</block>
	</view>
	<!-- 微信申请同意拒绝系统消息 -->
	<view v-else-if="cdata.subType===13" class="chat-system">
		<image class="icon" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/wx1.png" mode="aspectFill"></image>
		<block v-if="cdata.direction === 0">
			你<text>{{cdata.message.status===0?'同意':'拒绝'}}</text>了{{cdata.message.receiveUserName}}的微信申请
		</block>
		<block v-else>
			{{cdata.message.sendUserName}}<text>{{cdata.message.status===0?'同意':'拒绝'}}</text>了你的微信申请
		</block>
	</view>
	<!-- 赠送会员系统提示 -->
	<view v-else-if="cdata.subType===15" class="chat-system">
		<image class="icon" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/goldcrown.png" mode="aspectFill">
		</image>
		<block v-if="cdata.direction === 0">
			你赠送了{{cdata.message.receiveUserName}}<text>{{cdata.message.member.number||1}}个月{{cdata.message.member.member_level}}￥{{cdata.message.member.price}}</text>
		</block>
		<block v-else>
			{{cdata.message.sendUserName}}赠送了你<text>{{cdata.message.number||1}}个月{{cdata.message.member.member_level}}￥{{cdata.message.member.price}}</text>
		</block>
	</view>
	<view v-else-if="cdata.subType===50" class="chat-system">
		组局发布成功
	</view>
	<view v-else-if="cdata.subType===51||cdata.subType===52" class="chat-system">
		<text
			@click="route('/pages/user/user_visitor?id='+cdata.message.userID)">{{`"${cdata.message.nickName}"`}}</text>加入群聊
	</view>
	<view v-else-if="cdata.subType===53||cdata.subType===54" class="chat-system">
		<text
			@click="toRoute('/pages/user/user_visitor?id='+cdata.message.userID)">{{`"${cdata.message.nickName}"`}}</text>退出群聊
	</view>
	<!-- 违禁词提醒 -->
	<view v-else-if="cdata.subType===60" class="chat-system-cus">
		温馨提醒：敏感信息请加对方微信交流
	</view>
	<!-- 赠送会员系统提示 -->
	<view v-else-if="cdata.subType===150" @click="toRoute('/pages/user/apply_member')" class="chat-system-cus">
		温馨提醒：你还没有开通会员，每天只能回复1条消息，开通会员发送更多消息，<text>点击开通会员</text>
	</view>
	<!-- 好友添加系统提示 -->
	<view v-else-if="cdata.subType===151" @click="customEvent('friendAdd')" class="chat-system-cus">
		温馨提醒：你还不是对方的好友，<text>点击添加好友</text>
	</view>
	<!-- 赠送会员系统提示 -->
	<view v-else-if="cdata.subType===152" @click="customEvent('memberGive')" class="chat-system-cus">
		温馨提醒：对方还不是会员用户，<text>点击赠送会员</text>
	</view>
	<view v-else :class="{'flex-flow':cdata.direction === 0}" class="chat-item">
		<view class="chat-head">
			<!-- 对象头像 -->
			<image v-if="cdata.direction === 1" @click="toRoute(`/pages/user/user_visitor?id=${uID(cdata.senderUserID)}`)"
				:src="cdata.userAvatarUrl" mode="aspectFill"></image>
			<!-- 自己头像 -->
			<image v-else @click="toRoute(`/pages/user/user_visitor?id=${uID(cdata.senderUserID)}`)"
				:src="cdata.userAvatarUrl" mode="aspectFill"></image>
		</view>
		<view v-if="cdata.subType===10" @click="reviceGift" :class="{'custom-receipt':cdata.receiptStatus===2}"
			class="chat-custom">
			<view class="custom-cell">
				<view class="custom-icon">
					<image :src="cdata.message.icon" mode="aspectFill"></image>
				</view>
				<view class="custom-body">
					<view class="custom-name">
						{{cdata.message.name}} ￥{{cdata.message.price}}
					</view>
					<view v-if="cdata.receiptStatus===2" class="custom-desc">
						{{cdata.direction===0?(cdata.reactionType==='accept'?'已被领取':'已被拒收'):(cdata.reactionType==='accept'?'已领取':'已拒收')}}
					</view>
					<view v-else class="custom-desc"> {{cdata.direction===0?'你发起了一次礼物赠送':'请领取'}} </view>
				</view>
			</view>
			<view class="custom-title"> 礼物赠送 </view>
		</view>
		<view v-else-if="cdata.subType===12" :class="{'custom-receipt':cdata.receiptStatus===2}"
			class="chat-custom custom-color">
			<view class="custom-cell">
				<view class="custom-icon">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/wx.png" mode="aspectFill"></image>
				</view>
				<view class="custom-body">
					<view v-if="cdata.receiptStatus===2" class="custom-content">
						{{cdata.direction===0?(cdata.reactionType==='accept'?'对方已同意了你的微信号申请':'对方拒绝了你的微信号申请'):(cdata.reactionType==='accept'?'已同意对方的微信号申请':'拒绝了对方的微信号申请')}}
					</view>
					<view v-else class="custom-content">
						{{cdata.direction===0?'你发起了一次微信号申请，等待对方同意':'对方申请查看您的微信号，是否同意？'}}
					</view>
				</view>
			</view>
			<view v-if="cdata.direction===1&&cdata.receiptStatus===1" class="wx-add">
				<view class="add-btn btn-color" @click="WXEvent('refuse')"> 拒绝 </view>
				<view class="add-btn" @click="WXEvent('accept')"> 同意 </view>
			</view>
			<view v-else class="custom-title"> 微信申请 </view>
		</view>
		<!-- 发送微信号给对方 -->
		<view v-else-if="cdata.subType===14" :class="{'custom-receipt':cdata.receiptStatus===2}"
			class="chat-custom custom-color">
			<view class="custom-cell">
				<view class="custom-icon">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/wx.png" mode="aspectFill"></image>
				</view>
				<view class="custom-body" @click="copyText(cdata.message.wx_no)">
					<view class="custom-content">微信号(点击复制)：<br><text>{{cdata.message.wx_no}}</text> </view>
				</view>
			</view>
			<view class="custom-title"> 微信申请 </view>
		</view>
		<!-- 星助教问候语 -->
		<view v-else-if="cdata.subType===153" class="chat-custom chat-robot">
			您好，感谢您对我的关注，请选择服务类型：
			<view @click="robot('1、下场 1000/场')" class="custom-robot">
				1、下场 1000/场
			</view>
			<view @click="robot('2、练习场 200/小时')" class="custom-robot">
				2、练习场 200/小时
			</view>
			<view @click="robot('3、模拟器 200/小时')" class="custom-robot">
				3、模拟器 200/小时
			</view>
		</view>
	</view>
</template>

<script>
	import { getID } from '@/im/js/utils';
	export default {
		props: {
			cdata: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {

			}
		},
		created() {},
		computed: {
			uID() {
				return (id) => {
					return getID(id)
				}
			}
		},
		methods: {
			async reviceGift() {
				const flag = await this.messageRead('accept')
				if (flag) {
					const userID = uni.getStorageSync('imUserID')
					const message = this.cdata
					this.$emit('customEvent', {
						type: 'gift',
						data: {
							receiptStatus: 2,
							reactionType: 'accept',
							receiveUserID: message.senderUserID, //对方接收者
							sendUserID: userID, //发送系统消息给对方
							gift: message.message
						}
					})
				}
			},
			async WXEvent(reactionType) {
				const flag = await this.messageRead(reactionType)
				if (flag) {
					const userID = uni.getStorageSync('imUserID')
					const message = this.cdata
					this.$emit('customEvent', {
						type: 'wx',
						data: {
							receiptStatus: 2,
							reactionType,
							receiveUserID: message.senderUserID, //对方接收者
							sendUserID: userID, //发送系统消息给对方
							wx: message.message
						}
					})
				}
			},
			async messageRead(reactionType) {
				const userID = uni.getStorageSync('imUserID')
				const message = this.cdata
				if (message.senderUserID !== userID) {
					if (message.receiptStatus === 2) return false //已领取
					//回执
					const read = await this.$im.sendMessageReceiptsRead({ message, conversationID: message.conversationID })
					if (read.code !== 0) {
						uni.showToast({
							title: '领取失败',
							icon: 'none'
						})
						return false
					}
					//accept=接收，refuse=拒绝
					const reaction = await this.$im.addMessageReaction({ reactionType, message })
					if (reaction.code !== 0) {
						uni.showToast({
							title: '领取失败',
							icon: 'none'
						})
						return false
					}
					return true
				}
				return false
			},
			robot(content) {
				this.$emit('customEvent', {
					type: 'robot',
					data: {
						content
					}
				})
			},
			customEvent(type, data) {
				this.$emit('customEvent', {
					type,
					data
				})
			},
			copyText(str) {
				uni.setClipboardData({
					data: str,
					success() {}
				});
			},
			toRoute(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat-system {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 20rpx 40rpx;
		color: #d2d2d2;
		font-size: 24rpx;

		.icon {
			width: 40rpx;
			height: 40rpx;
			display: block;
			margin-right: 5rpx;
		}

		text {
			color: #fe992d;
		}
	}

	.chat-system-cus {
		padding: 20rpx 80rpx;
		color: #d2d2d2;
		font-size: 24rpx;
		text-align: center;

		text {
			color: #fe992d;
		}
	}

	.chat-item {
		display: flex;
		padding: 15rpx 20rpx;

		&.flex-flow {
			flex-flow: row-reverse;

			.chat-custom {
				&::after {
					left: unset;
					top: 30rpx;
					right: -16rpx;
					border-width: 16rpx 0 12rpx 24rpx;
					border-color: transparent transparent transparent #fe992d;
				}

				&.custom-receipt {
					// background-color: #ffe1bf;
					opacity: 0.6;
				}

				&.custom-color {
					&::after {
						border-color: transparent transparent transparent #1afa29;
					}
				}
			}
		}

		.chat-head {
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				display: block;
			}
		}
	}

	.chat-custom {
		width: 420rpx;
		margin: 0 20rpx;
		background-color: #fe992d;
		border-radius: 12rpx;
		padding: 20rpx 20rpx 0rpx 20rpx;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			top: 30rpx;
			left: -16rpx;
			width: 0;
			height: 0;
			border-width: 16rpx 24rpx 12rpx 0;
			border-style: solid;
			border-color: transparent #fe992d transparent transparent;
		}

		&.custom-receipt {
			opacity: 0.6;
		}

		&.custom-color {
			background-color: #1afa29;

			&::after {
				border-color: transparent #1afa29 transparent transparent;
			}

			.custom-title {
				color: #666;

				&::after {
					background-color: #666;
				}
			}
		}

		&.chat-robot {
			background-color: #fff;
			font-size: 30rpx;
			line-height: 38rpx;
			padding-bottom: 20rpx;
			color: #1B0F06;

			&::after {
				border-color: transparent #fff transparent transparent;
			}
		}

		.custom-robot {
			background: linear-gradient(to right, #aa55ff, #ff5500);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size: 30rpx;
			line-height: 38rpx;
			padding: 8rpx 0;
			text-decoration: underline;
		}

		.custom-cell {
			display: flex;

			.custom-icon {
				width: 80rpx;
				height: 80rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.custom-body {
				padding-left: 20rpx;
				flex: 1;

				.custom-name {
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
				}

				.custom-desc {
					color: #fff;
					font-size: 26rpx;
				}

				.custom-content {
					color: #000;
					padding-top: 4rpx;
					font-size: 28rpx;
					line-height: 38rpx;

					text {
						color: #5500ff;
					}
				}
			}
		}

		.custom-title {
			color: #f0f0f0;
			font-size: 20rpx;
			padding: 10rpx 0rpx;
			position: relative;
			margin-top: 12rpx;

			&::after {
				position: absolute;
				top: 0;
				right: 0;
				left: 0rpx;
				height: 2rpx;
				content: '';
				transform: scaleY(.1);
				background-color: #fff;
			}
		}

		.wx-add {
			display: flex;
			padding: 15rpx 0;
			position: relative;
			margin-top: 12rpx;

			&::after {
				position: absolute;
				top: 0;
				right: 0;
				left: 0rpx;
				height: 2rpx;
				content: '';
				transform: scaleY(.1);
				background-color: #666;
			}

			.add-btn {
				flex: 1;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: #0000ff;
				position: relative;


				&.btn-color {
					color: #666;

					&::after {
						position: absolute;
						top: 10rpx;
						bottom: 10rpx;
						right: 0;
						width: 2rpx;
						height: 40rpx;
						content: '';
						background-color: rgba(102, 102, 102, 0.3);
					}
				}
			}
		}
	}
</style>